<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Rapido Documentation</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="Description">
		<meta name="author" content="Autor">
		<!-- loading the css -->
		<link href="assets/css/bootstrap.css" rel="stylesheet">
		<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
		<link href="assets/css/style.css" rel="stylesheet">
		<style type="text/css">
			body {
				padding-bottom: 40px;
			}
			section {
				padding: 60px 0 0 0;
			}
		</style>
		<!--[if lt IE 9]>
		<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<!-- Various Icons (Favicon, Touch Icon,... -->
		<link rel="shortcut icon" href="assets/img/favicon.ico">
	</head>
	<body>
		<!-- ========================= NAVIGATION BAR >> START ========================= -->
		<div class="navbar navbar-fixed-top es-docs-nav" role="navigation">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#">
						Rapido
					</a>
				</div>
				<div class="collapse navbar-collapse">
					<ul class="nav navbar-nav">
						<li>
							<a href="#">
								Home
							</a>
						</li>
						<li>
							<a href="#features">
								Features
							</a>
						</li>
						<li>
							<a href="#structure">
								Template Structure
							</a>
						</li>
						<li>
							<a href="#configurations">
								Configurations
							</a>
						</li>
						<li>
							<a href="#plugins">
								Plugins
							</a>
						</li>
						<li>
							<a href="#changelog">
								Change Log
							</a>
						</li>
					</ul>
				</div>
				<!--/.nav-collapse -->
			</div>
		</div>
		<!-- ========================= NAVIGATION BAR >> END ========================= -->
		<div class="es-docs-masthead" id="content" role="main">
			<div class="container">
				<span class="es-docs-booticon es-docs-booticon-lg"><img src="assets/img/logo.png"></span>
				<p class="lead">
					Rapido is the tool designed by Clip-Theme to fulfil every possible need of those developing a completely responsive and mobile-first web project. - shared on weidea.net
				 </p>
				<p class="lead">
					<a href="http://themeforest.net/user/Cliptheme/portfolio?WT.ac=portfolio_item&WT.z_author=Cliptheme" class="btn btn-outline-inverse btn-lg">
						Download Rapido
					</a>
				</p>
				<p class="version">
					Currently v1.0
				</p>
			</div>
		</div>
		<!-- ========================= MAIN CONTAINER >> START ========================= -->
		<div class="container">
			<!-- ========================= SECTION: FEATURES >> START ========================= -->
			<section id="features">
				<div class="page-header">
					<h1>Features <small>Full List</small></h1>
					<div class="row">
						<div class="col-md-12">
							<div class="highlight">
								<ul>
									<li>
										<strong>Overall</strong>
										<ul>
											<li>
												100% Fully Responsive
											</li>
											<li>
												100% Fully Customizable
											</li>
											<li>
												Developer Friendly Code
											</li>
											<li>
												Bootstrap 3.2.0 Framework
											</li>
											<li>
												jQuery 2.1.1
											</li>
											<li>
												10 Color Themes
											</li>
											<li>
												5 Different Background Images
											</li>
											<li>
												Documentation available
											</li>
											<li>
												Full SASS Support
											</li>
											<li>
												Raleway Google fonts
											</li>
											<li>
												Dashboard with widgets, stats, charts and events
											</li>
										</ul>
									</li>
									<li>
										<strong>Layouts</strong>
										<ul>
											<li>
												Fixed and Default Horizontal Menu
											</li>
											<li>
												Horizontal Mega Menu
											</li>
											<li>
												Horizontal and Sidebar Menu
											</li>
											<li>
												Fixed and Default Sidebar
											</li>
											<li>
												Sidebar Closed Layout
											</li>
											<li>
												Boxed Page Layout
											</li>
											<li>
												Single-page Inteface Layout
											</li>
										</ul>
									</li>
									<li>
										<strong>UI Features</strong>
										<ul>
											<li>
												Custom Animated Progressbars
											</li>
											<li>
												Custom Paginations
											</li>
											<li>
												Custom Buttons
											</li>
											<li>
												Toggle Buttons
											</li>
											<li>
												Social Animated Buttons
											</li>
											<li>
												Buttons With Loading Indicator
											</li>
											<li>
												Font Awesome Icons
											</li>
											<li>
												CSS3 Animation
											</li>
											<li>
												Subview Contents
											</li>
											<li>
												Subview Live Examples
												<ul>
													<li>
														Advanced Add and Edit Notes
													</li>
													<li>
														Advanced Add and Edit Contributors
													</li>
													<li>
														Advanced Add and Edit Calendar
													</li>
												</ul>
											</li>
											<li>
												Programmatic and Extended Modals
											</li>
											<li>
												Custom Pannels
											</li>
											<li>
												Custom Scrollbar For Vertical Scrollable Contents (perfect-scrollbar)
											</li>
											<li>
												Toastr notifications
											</li>
											<li>
												Custom Touch Range Sliders
											</li>
											<li>
												Custom Bootstrap Sliders
											</li>
											<li>
												Knob Circle Dials
											</li>
											<li>
												Bootstrap Tree Views
											</li>
											<li>
												Interactive Nestable List
											</li>
											<li>
												Interactive Nestable List
											</li>
											<li>
												Page Element Pulsate
											</li>
											<li>
												Ndv3 Charts &amp; Graphs
											</li>
											<li>
												Interactive Google Maps(GMaps)
											</li>
										</ul>
									</li>
									<li>
										<strong>Form Elements</strong>
										<ul>
											<li>
												Custom Text Fields
											</li>
											<li>
												Custom Add-ons
											</li>
											<li>
												Custom Text Area
											</li>
											<li>
												Autosize Text Area
											</li>
											<li>
												iCheck Radio Button and Checkbox
											</li>
											<li>
												Select 2 Dropdowns
											</li>
											<li>
												Date/Time Picker
											</li>
											<li>
												Color Picker
											</li>
											<li>
												jQuery Tags Input
											</li>
											<li>
												WYSIWYG Custom Summernote Style
											</li>
											<li>
												WYSIWYG CKEditor
											</li>
											<li>
												Form Wizards (jQuery Smart Wizard)
											</li>
											<li>
												Advanced Form Validation
											</li>
											<li>
												Inline Editing With WYSIWYG Editors (CKEditor)
											</li>
											<li>
												Form X-editable
											</li>
											<li>
												Image Crop Plug-in (Jcrop)
											</li>
											<li>
												Multiple File Upload
											</li>
											<li>
												Bootstrap File Upload
											</li>
											<li>
												Dropzone File Upload
											</li>
										</ul>
									</li>
									<li>
										<strong>Tables</strong>
										<ul>
											<li>
												Basic Tables
											</li>
											<li>
												Responsive Tables
											</li>
											<li>
												Data Tables
											</li>
											<li>
												Managed Data Tables
											</li>
											<li>
												Tables Export (JSON, XML, PNG, CSV, TXT, SQL, MS-Word, Ms-Excel, Ms-Powerpoint and PDF)
											</li>
										</ul>
									</li>
									<li>
										<strong>Login</strong>
										<ul>
											<li>
												Login page
											</li>
											<li>
												Register Page
											</li>
											<li>
												Forgot Password Page
											</li>
											<li>
												Lock Screen
											</li>
										</ul>
									</li>
									<li>
										<strong>Pages</strong>
										<ul>
											<li>
												User Profile
											</li>
											<li>
												Invoice
											</li>
											<li>
												Advanced Gallery
											</li>
											<li>
												Timeline with Scrubber
											</li>
											<li>
												Advanced Full Calendar Management
											</li>
											<li>
												Mail Box
											</li>
											<li>
												Blank Page
											</li>
										</ul>
									</li>
									<li>
										<strong>Utilities</strong>
										<ul>
											<li>
												FAQ
											</li>
											<li>
												Search Results
											</li>
											<li>
												404 Error Page(various options)
											</li>
											<li>
												500 Error Page(various options)
											</li>
											<li>
												Pricing Tables
											</li>
											<li>
												Coming Soon Page
											</li>
										</ul>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</section>
			<!-- ========================= SECTION: FEATURES >> END ========================= -->
			<!-- ========================= SECTION: STRUCTURE >> START ========================= -->
			<section id="structure">
				<div class="page-header">
					<h1>Template Structure <small>Elements</small></h1>
				</div>
				<p>
					All template pages have a fixed structure, including the following elements:
				</p>
				<ul>
					<li>
						TopBar (Header)
					</li>
					<li>
						Left Sidebar (with Main Navigation Menu)
					</li>
					<li>
						Sliding Right Sidebar
					</li>
					<li>
						Content
						<ul>
							<li>
								Toolbar
							</li>
							<li>
								Main Content of the Page
							</li>
						</ul>
					</li>
					<li>
						Footer
					</li>
				</ul>
				<div class="alert alert-info">
					The Left Sidebar becomes a hidden Sliding Sidebar with a screen resolution of at least 992 pixels
				</div>
				<hr />
				<div class="row">
					<div class="col-md-12">
						<h3>Desktop</h3>
					</div>
					<div class="col-md-12">
						<img src="assets/img/template-desktop.png" class="img-responsive">
					</div>
					<div class="col-md-12">
						<h3>Tablet</h3>
					</div>
					<div class="col-md-12">
						<img src="assets/img/template-tablet.png" class="img-responsive">
					</div>
					<div class="col-md-12">
						<h3>Mobile</h3>
					</div>
					<div class="col-md-12">
						<img src="assets/img/template-mobile.png" class="img-responsive">
					</div>
				</div>
				<hr />
				<div class="row">
					<div class="col-md-3">
						<h3>Beginning of Page</h3>
						<p>
							This is a very basic and solid startup for all and any HTML5 projects you might do in the future.
						</p>
					</div>
					<div class="col-md-9">
						<!-- Code Block >> Start -->
						<pre class="prettyprint lang-html">
&lt;!DOCTYPE html&gt;
&lt;!--[if IE 8]&gt;&lt;html class="ie8" lang="en"&gt;&lt;![endif]--&gt;
&lt;!--[if IE 9]&gt;&lt;html class="ie9" lang="en"&gt;&lt;![endif]--&gt;
&lt;!--[if !IE]&gt;&lt;!--&gt;
&lt;html lang="en"&gt;
&lt;!--&lt;![endif]--&gt;
</pre>
						<!-- Code Block >> End -->
					</div>
				</div>
				<hr />
				<div class="row">
					<div class="col-md-3">
						<h3>Page Head</h3>
						<p>
							The <code>&lt;head&gt;</code> element is a container for all the head elements. Elements inside head include title, instruct the browser where to find style sheets, provide meta information.
						</p>
					</div>
					<div class="col-md-9">
						<!-- Code Block >> Start -->
						<pre class="prettyprint lang-html">
&lt;!-- start: HEAD --&gt;
&lt;head&gt;
&lt;title&gt;Rapido - Responsive Admin Template&lt;/title&gt;
&lt;!-- start: META --&gt;
&lt;meta charset="utf-8" /&gt;
&lt;!--[if IE]&gt;&lt;meta http-equiv='X-UA-Compatible' content="IE=edge,IE=9,IE=8,chrome=1" /&gt;&lt;![endif]--&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"&gt;
&lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
&lt;meta name="apple-mobile-web-app-status-bar-style" content="black"&gt;
&lt;meta content="" name="description" /&gt;
&lt;meta content="" name="author" /&gt;
&lt;!-- end: META --&gt;
&lt;!-- start: MAIN CSS --&gt;
&lt;link href='http://fonts.googleapis.com/css?family=Raleway:400,300,500,600,700,200,100,800' rel='stylesheet' type='text/css'&gt;
&lt;link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css"&gt;
&lt;link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css"&gt;
&lt;link rel="stylesheet" href="assets/plugins/iCheck/skins/all.css"&gt;
&lt;link rel="stylesheet" href="assets/plugins/perfect-scrollbar/src/perfect-scrollbar.css"&gt;
&lt;link rel="stylesheet" href="assets/plugins/animate.css/animate.min.css"&gt;
&lt;!-- end: MAIN CSS --&gt;
&lt;!-- start: CSS REQUIRED FOR SUBVIEW CONTENTS --&gt;
&lt;link rel="stylesheet" href="assets/plugins/owl-carousel/owl-carousel/owl.carousel.css"&gt;
&lt;link rel="stylesheet" href="assets/plugins/owl-carousel/owl-carousel/owl.theme.css"&gt;
&lt;link rel="stylesheet" href="assets/plugins/owl-carousel/owl-carousel/owl.transitions.css"&gt;
&lt;link rel="stylesheet" href="assets/plugins/summernote/dist/summernote.css"&gt;
&lt;link rel="stylesheet" href="assets/plugins/fullcalendar/fullcalendar/fullcalendar.css"&gt;
&lt;link rel="stylesheet" href="assets/plugins/toastr/toastr.min.css"&gt;
&lt;link rel="stylesheet" href="assets/plugins/bootstrap-select/bootstrap-select.min.css"&gt;
&lt;link rel="stylesheet" href="assets/plugins/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css"&gt;
&lt;link rel="stylesheet" href="assets/plugins/DataTables/media/css/DT_bootstrap.css"&gt;
&lt;link rel="stylesheet" href="assets/plugins/bootstrap-fileupload/bootstrap-fileupload.min.css"&gt;
&lt;link rel="stylesheet" href="assets/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css"&gt;
&lt;!-- end: CSS REQUIRED FOR THIS SUBVIEW CONTENTS--&gt;
&lt;!-- start: CSS REQUIRED FOR THIS PAGE ONLY --&gt;
&lt;link rel="stylesheet" href="assets/plugins/weather-icons/css/weather-icons.min.css"&gt;
&lt;link rel="stylesheet" href="assets/plugins/nvd3/nv.d3.min.css"&gt;
&lt;!-- end: CSS REQUIRED FOR THIS PAGE ONLY --&gt;
&lt;!-- start: CORE CSS --&gt;
&lt;link rel="stylesheet" href="assets/css/styles.css"&gt;
&lt;link rel="stylesheet" href="assets/css/styles-responsive.css"&gt;
&lt;link rel="stylesheet" href="assets/css/plugins.css"&gt;
&lt;link rel="stylesheet" href="assets/css/themes/theme-default.css" type="text/css" id="skin_color"&gt;
&lt;link rel="stylesheet" href="assets/css/print.css" type="text/css" media="print"/&gt;
&lt;!-- end: CORE CSS --&gt;
&lt;link rel="shortcut icon" href="favicon.ico" /&gt;
&lt;/head&gt;
&lt;!-- end: HEAD --&gt;</pre>
						<!-- Code Block >> End -->
					</div>
				</div>
				<hr />
				<div class="row">
					<div class="col-md-3">
						<h3>TopBar (Header)</h3>
						<p>
							The TopBar includes the logo, the User Options Dropdown Menu and the button for slide out the right sidebar from the right side of the screen.
						</p>
						<div class="alert alert-info">
							With a lower screen resolution at 100 pixels, the TopBar also includes a button for slide out the left sidebar from the left side of the screen
						</div>
					</div>
					<div class="col-md-9">
						<!-- Code Block >> Start -->
						<pre class="prettyprint lang-html">
&lt;!-- start: TOPBAR --&gt;
&lt;header class="topbar navbar navbar-inverse navbar-fixed-top inner"&gt;
	&lt;!-- start: TOPBAR CONTAINER --&gt;
	&lt;div class="container"&gt;
		&lt;div class="navbar-header"&gt;
			&lt;a class="sb-toggle-left hidden-md hidden-lg" href="#main-navbar"&gt;
				&lt;i class="fa fa-bars"&gt;&lt;/i&gt;
			&lt;/a&gt;
			&lt;!-- start: LOGO --&gt;
			&lt;a class="navbar-brand" href="index.html"&gt;
				&lt;img src="assets/images/logo.png" alt="Rapido"/&gt;
			&lt;/a&gt;
			&lt;!-- end: LOGO --&gt;
		&lt;/div&gt;
		&lt;div class="topbar-tools"&gt;
			&lt;!-- start: TOP NAVIGATION MENU --&gt;
			&lt;ul class="nav navbar-right"&gt;
				&lt;!-- start: USER DROPDOWN --&gt;
				&lt;li class="dropdown current-user"&gt;
					&lt;a data-toggle="dropdown" data-hover="dropdown" class="dropdown-toggle" data-close-others="true" href="#"&gt;
						&lt;img src="assets/images/avatar-1-small.jpg" class="img-circle" alt=""&gt; &lt;span class="username hidden-xs"&gt;Peter Clark&lt;/span&gt; &lt;i class="fa fa-caret-down "&gt;&lt;/i&gt;
					&lt;/a&gt;
					&lt;ul class="dropdown-menu dropdown-dark"&gt;
						&lt;li&gt;
							&lt;a href="pages_user_profile.html"&gt;
								My Profile
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="pages_calendar.html"&gt;
								My Calendar
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="pages_messages.html"&gt;
								My Messages (3)
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="login_lock_screen.html"&gt;
								Lock Screen
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="login_login.html"&gt;
								Log Out
							&lt;/a&gt;
						&lt;/li&gt;
					&lt;/ul&gt;
				&lt;/li&gt;
				&lt;!-- end: USER DROPDOWN --&gt;
				&lt;li class="right-menu-toggle"&gt;
					&lt;a href="#" class="sb-toggle-right"&gt;
						&lt;i class="fa fa-globe toggle-icon"&gt;&lt;/i&gt; &lt;i class="fa fa-caret-right"&gt;&lt;/i&gt; &lt;span class="notifications-count badge badge-default hide"&gt; 3&lt;/span&gt;
					&lt;/a&gt;
				&lt;/li&gt;
			&lt;/ul&gt;
			&lt;!-- end: TOP NAVIGATION MENU --&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;!-- end: TOPBAR CONTAINER --&gt;
&lt;/header&gt;
&lt;!-- end: TOPBAR --&gt;</pre>
						<!-- Code Block >> End -->
					</div>
				</div>
				<hr />
				<div class="row">
					<div class="col-md-3">
						<h3>Left Sidebar <small>(Main Navigation Menu)</small></h3>
						<p>
							It includes the main web browsing links and up to 4 indent levels
						</p>
					</div>
					<div class="col-md-9">
						<!-- Code Block >> Start -->
						<pre class="prettyprint lang-html">
&lt;!-- start: PAGESLIDE LEFT --&gt;
&lt;a class="closedbar inner hidden-sm hidden-xs" href="#"&gt;
&lt;/a&gt;
&lt;nav id="pageslide-left" class="pageslide inner"&gt;
	&lt;div class="navbar-content"&gt;
		&lt;!-- start: SIDEBAR --&gt;
		&lt;div class="main-navigation left-wrapper transition-left"&gt;
			&lt;div class="navigation-toggler hidden-sm hidden-xs"&gt;
				&lt;a href="#main-navbar" class="sb-toggle-left"&gt;
				&lt;/a&gt;
			&lt;/div&gt;
			&lt;div class="user-profile border-top padding-horizontal-10 block"&gt;
				&lt;div class="inline-block"&gt;
					&lt;img src="assets/images/avatar-1.jpg" alt=""&gt;
				&lt;/div&gt;
				&lt;div class="inline-block"&gt;
					&lt;h5 class="no-margin"&gt; Welcome &lt;/h5&gt;
					&lt;h4 class="no-margin"&gt; Peter Clark &lt;/h4&gt;
					&lt;a class="btn user-options sb_toggle"&gt;
						&lt;i class="fa fa-cog"&gt;&lt;/i&gt;
					&lt;/a&gt;
				&lt;/div&gt;
			&lt;/div&gt;
			&lt;!-- start: MAIN NAVIGATION MENU --&gt;
			&lt;ul class="main-navigation-menu"&gt;
				&lt;li class="active open"&gt;
					&lt;a href="index.html"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt; &lt;span class="title"&gt; Dashboard &lt;/span&gt;&lt;span class="label label-default pull-right "&gt;LABEL&lt;/span&gt; &lt;/a&gt;
				&lt;/li&gt;
				&lt;li&gt;
					&lt;a href="javascript:void(0)"&gt;&lt;i class="fa fa-desktop"&gt;&lt;/i&gt; &lt;span class="title"&gt; Layouts &lt;/span&gt;&lt;i class="icon-arrow"&gt;&lt;/i&gt; &lt;/a&gt;
					&lt;ul class="sub-menu"&gt;
						&lt;li&gt;
							&lt;a href="javascript:;"&gt;
								Horizontal Menu &lt;i class="icon-arrow"&gt;&lt;/i&gt;
							&lt;/a&gt;
							&lt;ul class="sub-menu"&gt;
								&lt;li&gt;
									&lt;a href="layouts_horizontal_menu.html"&gt;
										Horizontal Menu
									&lt;/a&gt;
								&lt;/li&gt;
								&lt;li&gt;
									&lt;a href="layouts_horizontal_menu_fixed.html"&gt;
										Horizontal Menu Fixed
									&lt;/a&gt;
								&lt;/li&gt;
								&lt;li&gt;
									&lt;a href="layouts_horizontal_sidebar_menu.html"&gt;
										Horizontal &amp; Sidebar Menu
									&lt;/a&gt;
								&lt;/li&gt;
							&lt;/ul&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="layouts_sidebar_closed.html"&gt;
								&lt;span class="title"&gt; Sidebar Closed &lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="layouts_sidebar_not_fixed.html"&gt;
								&lt;span class="title"&gt; Sidebar Not Fixed &lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="layouts_boxed_layout.html"&gt;
								&lt;span class="title"&gt; Boxed Layout &lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="layouts_footer_fixed.html"&gt;
								&lt;span class="title"&gt; Footer Fixed &lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="layouts_single_page.html"&gt;
								&lt;span class="title"&gt; Single-Page Interface &lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
					&lt;/ul&gt;
				&lt;/li&gt;
				&lt;li&gt;
					&lt;a href="javascript:void(0)"&gt;&lt;i class="fa fa-cogs"&gt;&lt;/i&gt; &lt;span class="title"&gt; UI Lab &lt;/span&gt;&lt;i class="icon-arrow"&gt;&lt;/i&gt; &lt;/a&gt;
					&lt;ul class="sub-menu"&gt;
						&lt;li&gt;
							&lt;a href="ui_elements.html"&gt;
								&lt;span class="title"&gt; Elements &lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="ui_buttons.html"&gt;
								&lt;span class="title"&gt; Buttons &lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="ui_icons.html"&gt;
								&lt;span class="title"&gt; Icons &lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="ui_animations.html"&gt;
								&lt;span class="title"&gt; CSS3 Animation &lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="ui_subview.html"&gt;
								&lt;span class="title"&gt; Subview &lt;/span&gt; &lt;span class="label partition-blue pull-right "&gt;HOT&lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="ui_modals.html"&gt;
								&lt;span class="title"&gt; Extended Modals &lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="ui_tabs_accordions.html"&gt;
								&lt;span class="title"&gt; Tabs &amp; Accordions &lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="ui_panels.html"&gt;
								&lt;span class="title"&gt; Panels &lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="ui_notifications.html"&gt;
								&lt;span class="title"&gt; Notifications &lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="ui_sliders.html"&gt;
								&lt;span class="title"&gt; Sliders &lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="ui_treeview.html"&gt;
								&lt;span class="title"&gt; Treeview &lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="ui_nestable.html"&gt;
								&lt;span class="title"&gt; Nestable List &lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="ui_typography.html"&gt;
								&lt;span class="title"&gt; Typography &lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
					&lt;/ul&gt;
				&lt;/li&gt;
				&lt;li&gt;
					&lt;a href="javascript:void(0)"&gt;&lt;i class="fa fa-th-large"&gt;&lt;/i&gt; &lt;span class="title"&gt; Tables &lt;/span&gt;&lt;i class="icon-arrow"&gt;&lt;/i&gt; &lt;/a&gt;
					&lt;ul class="sub-menu"&gt;
						&lt;li&gt;
							&lt;a href="table_basic.html"&gt;
								&lt;span class="title"&gt;Basic Tables&lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="table_responsive.html"&gt;
								&lt;span class="title"&gt;Responsive Tables&lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="table_data.html"&gt;
								&lt;span class="title"&gt;Advanced Data Tables&lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="table_export.html"&gt;
								&lt;span class="title"&gt;Table Export&lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
					&lt;/ul&gt;
				&lt;/li&gt;
				&lt;li&gt;
					&lt;a href="javascript:void(0)"&gt;&lt;i class="fa fa-pencil-square-o"&gt;&lt;/i&gt; &lt;span class="title"&gt; Forms &lt;/span&gt;&lt;i class="icon-arrow"&gt;&lt;/i&gt; &lt;/a&gt;
					&lt;ul class="sub-menu"&gt;
						&lt;li&gt;
							&lt;a href="form_elements.html"&gt;
								&lt;span class="title"&gt;Form Elements&lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="form_wizard.html"&gt;
								&lt;span class="title"&gt;Form Wizard&lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="form_validation.html"&gt;
								&lt;span class="title"&gt;Form Validation&lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="form_inline.html"&gt;
								&lt;span class="title"&gt;Inline Editor&lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="form_x_editable.html"&gt;
								&lt;span class="title"&gt;Form X-editable&lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="form_image_cropping.html"&gt;
								&lt;span class="title"&gt;Image Cropping&lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="form_multiple_upload.html"&gt;
								&lt;span class="title"&gt;Multiple File Upload&lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="form_dropzone.html"&gt;
								&lt;span class="title"&gt;Dropzone File Upload&lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
					&lt;/ul&gt;
				&lt;/li&gt;
				&lt;li&gt;
					&lt;a href="javascript:void(0)"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt; &lt;span class="title"&gt;Login&lt;/span&gt;&lt;i class="icon-arrow"&gt;&lt;/i&gt; &lt;/a&gt;
					&lt;ul class="sub-menu"&gt;
						&lt;li&gt;
							&lt;a href="login_login.html"&gt;
								&lt;span class="title"&gt; Login Form &lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="login_login.html?box=register"&gt;
								&lt;span class="title"&gt; Registration Form &lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="login_login.html?box=forgot"&gt;
								&lt;span class="title"&gt; Forgot Password Form &lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="login_lock_screen.html"&gt;
								&lt;span class="title"&gt;Lock Screen&lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
					&lt;/ul&gt;
				&lt;/li&gt;
				&lt;li&gt;
					&lt;a href="javascript:void(0)"&gt;&lt;i class="fa fa-code"&gt;&lt;/i&gt; &lt;span class="title"&gt;Pages&lt;/span&gt;&lt;i class="icon-arrow"&gt;&lt;/i&gt; &lt;/a&gt;
					&lt;ul class="sub-menu"&gt;
						&lt;li&gt;
							&lt;a href="pages_user_profile.html"&gt;
								&lt;span class="title"&gt;User Profile&lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="pages_invoice.html"&gt;
								&lt;span class="title"&gt;Invoice&lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="pages_gallery.html"&gt;
								&lt;span class="title"&gt;Gallery&lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="pages_timeline.html"&gt;
								&lt;span class="title"&gt;Timeline&lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="pages_calendar.html"&gt;
								&lt;span class="title"&gt;Calendar&lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="pages_messages.html"&gt;
								&lt;span class="title"&gt;Messages&lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="pages_blank_page.html"&gt;
								&lt;span class="title"&gt;Blank Page&lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
					&lt;/ul&gt;
				&lt;/li&gt;
				&lt;li&gt;
					&lt;a href="javascript:void(0)"&gt;&lt;i class="fa fa-cubes"&gt;&lt;/i&gt; &lt;span class="title"&gt;Utility&lt;/span&gt;&lt;i class="icon-arrow"&gt;&lt;/i&gt; &lt;/a&gt;
					&lt;ul class="sub-menu"&gt;
						&lt;li&gt;
							&lt;a href="utility_faq.html"&gt;
								&lt;span class="title"&gt;Faq&lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="utility_search_result.html"&gt;
								&lt;span class="title"&gt;Search Results &lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="utility_404_example1.html"&gt;
								&lt;span class="title"&gt;Error 404 Example 1&lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="utility_404_example2.html"&gt;
								&lt;span class="title"&gt;Error 404 Example 2&lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="utility_404_example3.html"&gt;
								&lt;span class="title"&gt;Error 404 Example 3&lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="utility_500_example1.html"&gt;
								&lt;span class="title"&gt;Error 500 Example 1&lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="utility_500_example2.html"&gt;
								&lt;span class="title"&gt;Error 500 Example 2&lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="utility_pricing_table.html"&gt;
								&lt;span class="title"&gt;Pricing Table&lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="utility_coming_soon.html"&gt;
								&lt;span class="title"&gt;Cooming Soon&lt;/span&gt;
							&lt;/a&gt;
						&lt;/li&gt;
					&lt;/ul&gt;
				&lt;/li&gt;
				&lt;li&gt;
					&lt;a href="javascript:;" class="active"&gt;
						&lt;i class="fa fa-folder"&gt;&lt;/i&gt; &lt;span class="title"&gt; 3 Level Menu &lt;/span&gt; &lt;i class="icon-arrow"&gt;&lt;/i&gt;
					&lt;/a&gt;
					&lt;ul class="sub-menu"&gt;
						&lt;li&gt;
							&lt;a href="javascript:;"&gt;
								Item 1 &lt;i class="icon-arrow"&gt;&lt;/i&gt;
							&lt;/a&gt;
							&lt;ul class="sub-menu"&gt;
								&lt;li&gt;
									&lt;a href="#"&gt;
										Sample Link 1
									&lt;/a&gt;
								&lt;/li&gt;
								&lt;li&gt;
									&lt;a href="#"&gt;
										Sample Link 2
									&lt;/a&gt;
								&lt;/li&gt;
								&lt;li&gt;
									&lt;a href="#"&gt;
										Sample Link 3
									&lt;/a&gt;
								&lt;/li&gt;
							&lt;/ul&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="javascript:;"&gt;
								Item 1 &lt;i class="icon-arrow"&gt;&lt;/i&gt;
							&lt;/a&gt;
							&lt;ul class="sub-menu"&gt;
								&lt;li&gt;
									&lt;a href="#"&gt;
										Sample Link 1
									&lt;/a&gt;
								&lt;/li&gt;
								&lt;li&gt;
									&lt;a href="#"&gt;
										Sample Link 1
									&lt;/a&gt;
								&lt;/li&gt;
								&lt;li&gt;
									&lt;a href="#"&gt;
										Sample Link 1
									&lt;/a&gt;
								&lt;/li&gt;
							&lt;/ul&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="#"&gt;
								Item 3
							&lt;/a&gt;
						&lt;/li&gt;
					&lt;/ul&gt;
				&lt;/li&gt;
				&lt;li&gt;
					&lt;a href="javascript:;"&gt;
						&lt;i class="fa fa-folder-open"&gt;&lt;/i&gt; &lt;span class="title"&gt; 4 Level Menu &lt;/span&gt;&lt;i class="icon-arrow"&gt;&lt;/i&gt; &lt;span class="arrow "&gt;&lt;/span&gt;
					&lt;/a&gt;
					&lt;ul class="sub-menu"&gt;
						&lt;li&gt;
							&lt;a href="javascript:;"&gt;
								Item 1 &lt;i class="icon-arrow"&gt;&lt;/i&gt;
							&lt;/a&gt;
							&lt;ul class="sub-menu"&gt;
								&lt;li&gt;
									&lt;a href="javascript:;"&gt;
										Sample Link 1 &lt;i class="icon-arrow"&gt;&lt;/i&gt;
									&lt;/a&gt;
									&lt;ul class="sub-menu"&gt;
										&lt;li&gt;
											&lt;a href="#"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt; Sample Link 1&lt;/a&gt;
										&lt;/li&gt;
										&lt;li&gt;
											&lt;a href="#"&gt;&lt;i class="fa fa-pencil"&gt;&lt;/i&gt; Sample Link 1&lt;/a&gt;
										&lt;/li&gt;
										&lt;li&gt;
											&lt;a href="#"&gt;&lt;i class="fa fa-edit"&gt;&lt;/i&gt; Sample Link 1&lt;/a&gt;
										&lt;/li&gt;
									&lt;/ul&gt;
								&lt;/li&gt;
								&lt;li&gt;
									&lt;a href="#"&gt;
										Sample Link 1
									&lt;/a&gt;
								&lt;/li&gt;
								&lt;li&gt;
									&lt;a href="#"&gt;
										Sample Link 2
									&lt;/a&gt;
								&lt;/li&gt;
								&lt;li&gt;
									&lt;a href="#"&gt;
										Sample Link 3
									&lt;/a&gt;
								&lt;/li&gt;
							&lt;/ul&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="javascript:;"&gt;
								Item 2 &lt;i class="icon-arrow"&gt;&lt;/i&gt;
							&lt;/a&gt;
							&lt;ul class="sub-menu"&gt;
								&lt;li&gt;
									&lt;a href="#"&gt;
										Sample Link 1
									&lt;/a&gt;
								&lt;/li&gt;
								&lt;li&gt;
									&lt;a href="#"&gt;
										Sample Link 1
									&lt;/a&gt;
								&lt;/li&gt;
								&lt;li&gt;
									&lt;a href="#"&gt;
										Sample Link 1
									&lt;/a&gt;
								&lt;/li&gt;
							&lt;/ul&gt;
						&lt;/li&gt;
						&lt;li&gt;
							&lt;a href="#"&gt;
								Item 3
							&lt;/a&gt;
						&lt;/li&gt;
					&lt;/ul&gt;
				&lt;/li&gt;
				&lt;li&gt;
					&lt;a href="maps.html"&gt;&lt;i class="fa fa-map-marker"&gt;&lt;/i&gt; &lt;span class="title"&gt;Maps&lt;/span&gt; &lt;/a&gt;
				&lt;/li&gt;
				&lt;li&gt;
					&lt;a href="charts.html"&gt;&lt;i class="fa fa-bar-chart-o"&gt;&lt;/i&gt; &lt;span class="title"&gt;Charts&lt;/span&gt; &lt;/a&gt;
				&lt;/li&gt;
			&lt;/ul&gt;
			&lt;!-- end: MAIN NAVIGATION MENU --&gt;
		&lt;/div&gt;
		&lt;!-- end: SIDEBAR --&gt;
	&lt;/div&gt;
	&lt;div class="slide-tools"&gt;
		&lt;div class="col-xs-6 text-left no-padding"&gt;
			&lt;a class="btn btn-sm status" href="#"&gt;
				Status &lt;i class="fa fa-dot-circle-o text-green"&gt;&lt;/i&gt; &lt;span&gt;Online&lt;/span&gt;
			&lt;/a&gt;
		&lt;/div&gt;
		&lt;div class="col-xs-6 text-right no-padding"&gt;
			&lt;a class="btn btn-sm log-out text-right" href="login_login.html"&gt;
				&lt;i class="fa fa-power-off"&gt;&lt;/i&gt; Log Out
			&lt;/a&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/nav&gt;
&lt;!-- end: PAGESLIDE LEFT --&gt;</pre>
						<!-- Code Block >> End -->
					</div>
				</div>
				<hr />
				<div class="row">
					<div class="col-md-3">
						<h3>Content</h3>
						<p>
							It includes the breadcrumbs, the Toolbar, the page title and the page main content.
							To create a new page, you can use
							pages_blank_page.html
							which provides basic page layout which you can extend and modify further.
						</p>
					</div>
					<div class="col-md-9">
						<!-- Code Block >> Start -->
						<pre class="prettyprint lang-html">
&lt;!-- start: MAIN CONTAINER --&gt;							
&lt;div class="main-container inner"&gt;
	&lt;!-- start: PAGE --&gt;
	&lt;div class="main-content"&gt;
		&lt;!-- start: PANEL CONFIGURATION MODAL FORM --&gt;
		&lt;div class="modal fade" id="panel-config" tabindex="-1" role="dialog" aria-hidden="true"&gt;
			&lt;div class="modal-dialog"&gt;
				&lt;div class="modal-content"&gt;
					&lt;div class="modal-header"&gt;
						&lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;
							&times;
						&lt;/button&gt;
						&lt;h4 class="modal-title"&gt;Panel Configuration&lt;/h4&gt;
					&lt;/div&gt;
					&lt;div class="modal-body"&gt;
						Here will be a configuration form
					&lt;/div&gt;
					&lt;div class="modal-footer"&gt;
						&lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;
							Close
						&lt;/button&gt;
						&lt;button type="button" class="btn btn-primary"&gt;
							Save changes
						&lt;/button&gt;
					&lt;/div&gt;
				&lt;/div&gt;
				&lt;!-- /.modal-content --&gt;
			&lt;/div&gt;
			&lt;!-- /.modal-dialog --&gt;
		&lt;/div&gt;
		&lt;!-- /.modal --&gt;
		&lt;!-- end: SPANEL CONFIGURATION MODAL FORM --&gt;
		&lt;div class="container"&gt;
			&lt;!-- start: PAGE HEADER --&gt;
			&lt;!-- start: TOOLBAR --&gt;
			&lt;div class="toolbar row"&gt;
				&lt;div class="col-sm-6 hidden-xs"&gt;
					&lt;div class="page-header"&gt;
						&lt;h1&gt;Blank Page &lt;small&gt;subtitle here&lt;/small&gt;&lt;/h1&gt;
					&lt;/div&gt;
				&lt;/div&gt;
				&lt;div class="col-sm-6 col-xs-12"&gt;
					&lt;a href="#" class="back-subviews"&gt;
						&lt;i class="fa fa-chevron-left"&gt;&lt;/i&gt; BACK
					&lt;/a&gt;
					&lt;a href="#" class="close-subviews"&gt;
						&lt;i class="fa fa-times"&gt;&lt;/i&gt; CLOSE
					&lt;/a&gt;
					&lt;div class="toolbar-tools pull-right"&gt;
						&lt;!-- start: TOP NAVIGATION MENU --&gt;
						&lt;ul class="nav navbar-right"&gt;
							&lt;!-- start: TO-DO DROPDOWN --&gt;
							&lt;li class="dropdown"&gt;
								&lt;a data-toggle="dropdown" data-hover="dropdown" class="dropdown-toggle" data-close-others="true" href="#"&gt;
									&lt;i class="fa fa-plus"&gt;&lt;/i&gt; SUBVIEW
									&lt;div class="tooltip-notification hide"&gt;
										&lt;div class="tooltip-notification-arrow"&gt;&lt;/div&gt;
										&lt;div class="tooltip-notification-inner"&gt;
											&lt;div style="width:100px"&gt;
												&lt;div class="semi-bold"&gt;
													HI THERE!
												&lt;/div&gt;
												&lt;div class="message"&gt;
													Try the Subview Live Experience
												&lt;/div&gt;
											&lt;/div&gt;
										&lt;/div&gt;
									&lt;/div&gt;
								&lt;/a&gt;
								&lt;ul class="dropdown-menu dropdown-light dropdown-subview"&gt;
									&lt;li class="dropdown-header"&gt;
										Notes
									&lt;/li&gt;
									&lt;li&gt;
										&lt;a href="#newNote" class="new-note"&gt;&lt;span class="fa-stack"&gt; &lt;i class="fa fa-file-text-o fa-stack-1x fa-lg"&gt;&lt;/i&gt; &lt;i class="fa fa-plus fa-stack-1x stack-right-bottom text-danger"&gt;&lt;/i&gt; &lt;/span&gt; Add new note&lt;/a&gt;
									&lt;/li&gt;
									&lt;li&gt;
										&lt;a href="#readNote" class="read-all-notes"&gt;&lt;span class="fa-stack"&gt; &lt;i class="fa fa-file-text-o fa-stack-1x fa-lg"&gt;&lt;/i&gt; &lt;i class="fa fa-share fa-stack-1x stack-right-bottom text-danger"&gt;&lt;/i&gt; &lt;/span&gt; Read all notes&lt;/a&gt;
									&lt;/li&gt;
									&lt;li class="dropdown-header"&gt;
										Calendar
									&lt;/li&gt;
									&lt;li&gt;
										&lt;a href="#newEvent" class="new-event"&gt;&lt;span class="fa-stack"&gt; &lt;i class="fa fa-calendar-o fa-stack-1x fa-lg"&gt;&lt;/i&gt; &lt;i class="fa fa-plus fa-stack-1x stack-right-bottom text-danger"&gt;&lt;/i&gt; &lt;/span&gt; Add new event&lt;/a&gt;
									&lt;/li&gt;
									&lt;li&gt;
										&lt;a href="#showCalendar" class="show-calendar"&gt;&lt;span class="fa-stack"&gt; &lt;i class="fa fa-calendar-o fa-stack-1x fa-lg"&gt;&lt;/i&gt; &lt;i class="fa fa-share fa-stack-1x stack-right-bottom text-danger"&gt;&lt;/i&gt; &lt;/span&gt; Show calendar&lt;/a&gt;
									&lt;/li&gt;
									&lt;li class="dropdown-header"&gt;
										Contributors
									&lt;/li&gt;
									&lt;li&gt;
										&lt;a href="#newContributor" class="new-contributor"&gt;&lt;span class="fa-stack"&gt; &lt;i class="fa fa-user fa-stack-1x fa-lg"&gt;&lt;/i&gt; &lt;i class="fa fa-plus fa-stack-1x stack-right-bottom text-danger"&gt;&lt;/i&gt; &lt;/span&gt; Add new contributor&lt;/a&gt;
									&lt;/li&gt;
									&lt;li&gt;
										&lt;a href="#showContributors" class="show-contributors"&gt;&lt;span class="fa-stack"&gt; &lt;i class="fa fa-user fa-stack-1x fa-lg"&gt;&lt;/i&gt; &lt;i class="fa fa-share fa-stack-1x stack-right-bottom text-danger"&gt;&lt;/i&gt; &lt;/span&gt; Show all contributor&lt;/a&gt;
									&lt;/li&gt;
								&lt;/ul&gt;
							&lt;/li&gt;
							&lt;li class="dropdown"&gt;
								&lt;a data-toggle="dropdown" data-hover="dropdown" class="dropdown-toggle" data-close-others="true" href="#"&gt;
									&lt;span class="messages-count badge badge-default hide"&gt;3&lt;/span&gt; &lt;i class="fa fa-envelope"&gt;&lt;/i&gt; MESSAGES
								&lt;/a&gt;
								&lt;ul class="dropdown-menu dropdown-light dropdown-messages"&gt;
									&lt;li&gt;
										&lt;span class="dropdown-header"&gt; You have 9 messages&lt;/span&gt;
									&lt;/li&gt;
									&lt;li&gt;
										&lt;div class="drop-down-wrapper ps-container"&gt;
											&lt;ul&gt;
												&lt;li class="unread"&gt;
													&lt;a href="javascript:;" class="unread"&gt;
														&lt;div class="clearfix"&gt;
															&lt;div class="thread-image"&gt;
																&lt;img src="./assets/images/avatar-2.jpg" alt=""&gt;
															&lt;/div&gt;
															&lt;div class="thread-content"&gt;
																&lt;span class="author"&gt;Nicole Bell&lt;/span&gt;
																&lt;span class="preview"&gt;Duis mollis, est non commodo luctus, nisi erat porttitor ligula...&lt;/span&gt;
																&lt;span class="time"&gt; Just Now&lt;/span&gt;
															&lt;/div&gt;
														&lt;/div&gt;
													&lt;/a&gt;
												&lt;/li&gt;
												&lt;li&gt;
													&lt;a href="javascript:;" class="unread"&gt;
														&lt;div class="clearfix"&gt;
															&lt;div class="thread-image"&gt;
																&lt;img src="./assets/images/avatar-3.jpg" alt=""&gt;
															&lt;/div&gt;
															&lt;div class="thread-content"&gt;
																&lt;span class="author"&gt;Steven Thompson&lt;/span&gt;
																&lt;span class="preview"&gt;Duis mollis, est non commodo luctus, nisi erat porttitor ligula...&lt;/span&gt;
																&lt;span class="time"&gt;8 hrs&lt;/span&gt;
															&lt;/div&gt;
														&lt;/div&gt;
													&lt;/a&gt;
												&lt;/li&gt;
												&lt;li&gt;
													&lt;a href="javascript:;"&gt;
														&lt;div class="clearfix"&gt;
															&lt;div class="thread-image"&gt;
																&lt;img src="./assets/images/avatar-5.jpg" alt=""&gt;
															&lt;/div&gt;
															&lt;div class="thread-content"&gt;
																&lt;span class="author"&gt;Kenneth Ross&lt;/span&gt;
																&lt;span class="preview"&gt;Duis mollis, est non commodo luctus, nisi erat porttitor ligula...&lt;/span&gt;
																&lt;span class="time"&gt;14 hrs&lt;/span&gt;
															&lt;/div&gt;
														&lt;/div&gt;
													&lt;/a&gt;
												&lt;/li&gt;
											&lt;/ul&gt;
										&lt;/div&gt;
									&lt;/li&gt;
									&lt;li class="view-all"&gt;
										&lt;a href="pages_messages.html"&gt;
											See All
										&lt;/a&gt;
									&lt;/li&gt;
								&lt;/ul&gt;
							&lt;/li&gt;
							&lt;li class="menu-search"&gt;
								&lt;a href="#"&gt;
									&lt;i class="fa fa-search"&gt;&lt;/i&gt; SEARCH
								&lt;/a&gt;
								&lt;!-- start: SEARCH POPOVER --&gt;
								&lt;div class="popover bottom search-box transition-all"&gt;
									&lt;div class="arrow"&gt;&lt;/div&gt;
									&lt;div class="popover-content"&gt;
										&lt;!-- start: SEARCH FORM --&gt;
										&lt;form class="" id="searchform" action="#"&gt;
											&lt;div class="input-group"&gt;
												&lt;input type="text" class="form-control" placeholder="Search"&gt;
												&lt;span class="input-group-btn"&gt;
													&lt;button class="btn btn-main-color btn-squared" type="button"&gt;
														&lt;i class="fa fa-search"&gt;&lt;/i&gt;
													&lt;/button&gt; &lt;/span&gt;
											&lt;/div&gt;
										&lt;/form&gt;
										&lt;!-- end: SEARCH FORM --&gt;
									&lt;/div&gt;
								&lt;/div&gt;
								&lt;!-- end: SEARCH POPOVER --&gt;
							&lt;/li&gt;
						&lt;/ul&gt;
						&lt;!-- end: TOP NAVIGATION MENU --&gt;
					&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;
			&lt;!-- end: TOOLBAR --&gt;
			&lt;!-- end: PAGE HEADER --&gt;
			&lt;!-- start: BREADCRUMB --&gt;
			&lt;div class="row"&gt;
				&lt;div class="col-md-12"&gt;
					&lt;ol class="breadcrumb"&gt;
						&lt;li&gt;
							&lt;a href="#"&gt;
								Dashboard
							&lt;/a&gt;
						&lt;/li&gt;
						&lt;li class="active"&gt;
							Blank Page
						&lt;/li&gt;
					&lt;/ol&gt;
				&lt;/div&gt;
			&lt;/div&gt;
			&lt;!-- end: BREADCRUMB --&gt;
			&lt;!-- start: PAGE CONTENT --&gt;
			&lt;div class="row"&gt;
				&lt;div class="col-md-12"&gt;
					&lt;div class="panel panel-white"&gt;
						&lt;div class="panel-body"&gt;
							Your content here
						&lt;/div&gt;
					&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;
			&lt;!-- end: PAGE CONTENT--&gt;
		&lt;/div&gt;
		&lt;div class="subviews"&gt;
			&lt;div class="subviews-container"&gt;&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;!-- end: PAGE --&gt;
&lt;/div&gt;
&lt;!-- end: MAIN CONTAINER --&gt;</pre>
						<!-- Code Block >> End -->
					</div>
				</div>
				<hr />
				<div class="row">
					<div class="col-md-3">
						<h3>Footer</h3>
						<p>
							It includes the company copyright information as well as a scroll button to rapidly come back to the top of the page.
						</p>
					</div>
					<div class="col-md-9">
						<!-- Code Block >> Start -->
						<pre class="prettyprint lang-html">
&lt;!-- start: FOOTER --&gt;
&lt;footer class="inner"&gt;
	&lt;div class="footer-inner"&gt;
		&lt;div class="pull-left"&gt;
			2014 &copy; Rapido by cliptheme.
		&lt;/div&gt;
		&lt;div class="pull-right"&gt;
			&lt;span class="go-top"&gt;&lt;i class="fa fa-chevron-up"&gt;&lt;/i&gt;&lt;/span&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/footer&gt;
&lt;!-- end: FOOTER --&gt;
</pre>
						<!-- Code Block >> End -->
					</div>
				</div>
				<hr />
				<div class="row">
					<div class="col-md-3">
						<h3>End Of Page <small>(Javascripts)</small></h3>
						<p>
							The Javascripts are placed right after the body closing tag. They make the template more dynamic and decrease the web page load times.
						</p>
					</div>
					<div class="col-md-9">
						<!-- Code Block >> Start -->
						<pre class="prettyprint lang-html">
&lt;!-- start: MAIN JAVASCRIPTS --&gt;
&lt;!--[if lt IE 9]&gt;
&lt;script src="assets/plugins/respond.min.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/excanvas.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;![endif]--&gt;
&lt;!--[if gte IE 9]&gt;&lt;!--&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;!--&lt;![endif]--&gt;
&lt;script src="assets/plugins/jquery-ui/jquery-ui-1.10.2.custom.min.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/blockUI/jquery.blockUI.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/iCheck/jquery.icheck.min.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/moment/min/moment.min.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/perfect-scrollbar/src/jquery.mousewheel.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/perfect-scrollbar/src/perfect-scrollbar.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/bootbox/bootbox.min.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/jquery.scrollTo/jquery.scrollTo.min.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/ScrollToFixed/jquery-scrolltofixed-min.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/jquery.appear/jquery.appear.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/jquery-cookie/jquery.cookie.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/velocity/jquery.velocity.min.js"&gt;&lt;/script&gt;
&lt;!-- end: MAIN JAVASCRIPTS --&gt;
&lt;!-- start: JAVASCRIPTS REQUIRED FOR SUBVIEW CONTENTS --&gt;
&lt;script src="assets/plugins/owl-carousel/owl-carousel/owl.carousel.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/jquery-mockjax/jquery.mockjax.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/toastr/toastr.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/fullcalendar/fullcalendar/fullcalendar.min.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/bootstrap-switch/dist/js/bootstrap-switch.min.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/bootstrap-select/bootstrap-select.min.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/jquery-validation/dist/jquery.validate.min.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/bootstrap-fileupload/bootstrap-fileupload.min.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/DataTables/media/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/DataTables/media/js/DT_bootstrap.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/truncate/jquery.truncate.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/summernote/dist/summernote.min.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/bootstrap-daterangepicker/daterangepicker.js"&gt;&lt;/script&gt;
&lt;script src="assets/js/subview.js"&gt;&lt;/script&gt;
&lt;script src="assets/js/subview-examples.js"&gt;&lt;/script&gt;
&lt;!-- end: JAVASCRIPTS REQUIRED FOR SUBVIEW CONTENTS --&gt;
&lt;!-- start: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY --&gt;
&lt;script src="assets/plugins/bootstrap-progressbar/bootstrap-progressbar.min.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/nvd3/lib/d3.v3.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/nvd3/nv.d3.min.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/nvd3/src/models/historicalBar.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/nvd3/src/models/historicalBarChart.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/nvd3/src/models/stackedArea.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/nvd3/src/models/stackedAreaChart.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/jquery.sparkline/jquery.sparkline.js"&gt;&lt;/script&gt;
&lt;script src="assets/plugins/easy-pie-chart/dist/jquery.easypiechart.min.js"&gt;&lt;/script&gt;
&lt;script src="assets/js/index.js"&gt;&lt;/script&gt;
&lt;!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY --&gt;
&lt;!-- start: CORE JAVASCRIPTS  --&gt;
&lt;script src="assets/js/main.js"&gt;&lt;/script&gt;
&lt;!-- end: CORE JAVASCRIPTS  --&gt;
&lt;script&gt;
	jQuery(document).ready(function() {
		Main.init();
		SVExamples.init();
		Index.init();
	});
&lt;/script&gt;
</pre>
						<!-- Code Block >> End -->
					</div>
				</div>
			</section>
			<!-- ========================= SECTION: MARKUP >> END ========================= -->
			<!-- ========================= SECTION: STYLES >> START ========================= -->
			<section id="styles">
				<div class="page-header">
					<h1>Styles</h1>
				</div>
				<div class="row">
					<div class="col-md-3">
						<h3>Stylesheets</h3>
						<p>
							Here's a list of the stylesheet files used in all the pages of this template, you can find more information opening each file
						</p>
					</div>
					<div class="col-md-9">
						<table class="table table-bordered table-striped">
							<thead>
								<tr>
									<th>File Name</th>
									<th>Description</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td><code>bootstrap.min.css</code></td>
									<td>Bootstrap Css</td>
								</tr>
								<tr>
									<td><code>font-awesome.min.css</code></td>
									<td>FontAwesome Css</td>
								</tr>
								<tr>
									<td><code>all.css</code></td>
									<td>iCheck Css (Custom Checkboxes and Radio Buttons)</td>
								</tr>
								<tr>
									<td><code>perfect-scrollbar.css</code></td>
									<td>Custom Scrollbar</td>
								</tr>
								<tr>
									<td><code>animate.min.css</code></td>
									<td>Animate Css</td>
								</tr>
								<tr>
									<td><code>styles.css</code></td>
									<td>Main Rapido Css</td>
								</tr>
								<tr>
									<td><code>styles-responsive.css</code></td>
									<td>Makes Rapido responsive</td>
								</tr>
								<tr>
									<td><code>plugins.css</code></td>
									<td>Customize the css of the plugins</td>
								</tr>
								<tr>
									<td><code>theme-default.css</code></td>
									<td>One of the ten themes of Rapido</td>
								</tr>
								<tr>
									<td><code>theme-default.css</code></td>
									<td>print.css</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<hr />
				<div class="row">
					<div class="col-md-3">
						<h3>CSS Structure</h3>
						<p>
							Code Comment Sample
						</p>
					</div>
					<div class="col-md-9">
						<!-- Code Block >> Start -->
						<pre class="pre-scrollable prettyprint">/* ---------------------------------------------------------------------- */
/*  Basic Elements & Classes
/* ---------------------------------------------------------------------- */

some code

/* ---------------------------------------------------------------------- */
/*  Page Header and Page Header elements
/* ---------------------------------------------------------------------- */

some code

/* ---------------------------------------------------------------------- */
/*  PageSlide Left
/* ---------------------------------------------------------------------- */

some code


etc, etc.</pre>
						<!-- Code Block >> End -->
					</div>
				</div>
			</section>
			<!-- ========================= SECTION: STYLES >> END ========================= -->
			<!-- ========================= SECTION: JAVASCRIPT >> START ========================= -->
			<section id="javascript">
				<div class="page-header">
					<h1>JavaScript </h1>
				</div>
				<div class="row">
					<div class="col-md-3">
						<h3>JavaScript Files</h3>
						<p>
							Here's a list of the javascript files used in all the pages of this template, you can find more information opening each file
						</p>
					</div>
					<div class="col-md-9">
						<table class="table table-bordered table-striped">
							<thead>
								<tr>
									<th>File Name</th>
									<th>Description</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td><code>jquery.min.js</code></td>
									<td>All JavaScript plugins require jQuery</td>
								</tr>
								<tr>
									<td><code>jquery-ui-1.10.2.custom.min.js</code></td>
									<td>Custom jQuery UI</td>
								</tr>
								<tr>
									<td><code>bootstrap.min.js</code></td>
									<td>Bring Bootstrap's components to life with over a dozen custom jQuery plugins.</td>
								</tr>
								<tr>
									<td><code>jquery.blockUI.js</code></td>
									<td>The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser</td>
								</tr>
								<tr>
									<td><code>jquery.icheck.min.js</code></td>
									<td>Super customized checkboxes and radio buttons for jQuery</td>
								</tr>
								<tr>
									<td><code>moment.min.js</code></td>
									<td>Parse, validate, manipulate, and display dates in javascript</td>
								</tr>
								<tr>
									<td><code>jquery.mousewheel.js</code></td>
									<td>A jQuery plugin that adds cross-browser mouse wheel support. </td>
								</tr>
								<tr>
									<td><code>perfect-scrollbar.js</code></td>
									<td>Tiny but perfect jQuery scrollbar plugin</td>
								</tr>
								<tr>
									<td><code>bootbox.min.js</code></td>
									<td>This jQuery plugin allows you to create programmatic dialog boxes using Twitter’s Bootstrap modals</td>
								</tr>
								<tr>
									<td><code>jquery.scrollTo.min.js</code></td>
									<td>Animated scrolling with jQuery</td>
								</tr>
								<tr>
									<td><code>jquery-scrolltofixed-min.js</code></td>
									<td>This jQuery plugin is used to fix elements on the page (top, bottom, anywhere)</td>
								</tr>
								<tr>
									<td><code>jquery.appear.js</code></td>
									<td>This plugin can be used to prevent unnecessary processeing for content that is hidden or is outside of the browser viewport.</td>
								</tr>
								<tr>
									<td><code>jquery.cookie.js</code></td>
									<td>Simple, lightweight jQuery plugin for reading, writing and deleting cookies.</td>
								</tr>
								<tr>
									<td><code>jquery.velocity.min.js</code></td>
									<td>Accelerated JavaScript animation.</td>
								</tr>
								<tr>
									<td><code>main.js</code></td>
									<td>The main javascript in order to give life to Rapido.</td>
								</tr>
							</tbody>
						</table>
						<div class="alert alert-info">
							Every page contains a related Rapido .js file which activates all the plug-ins (e.g. the page form_elements.html is associated to the file form-elements.js etc.). If you do not want to use some plug-in, you will first need to remove all the associated files, then to open the .js associated to the page and finally remove the recalls to the no more existing plug in the function “init”.
							Ex: If you don’t want to activate the plug in inputlimiter in form-elements.js, just remove the line “runInputLimiter();”
						</div>
					</div>
				</div>
				<hr />
				<div class="row">
					<div class="col-md-3">
						<h3>Javascript Structure</h3>
					</div>
					<div class="col-md-9">
						<!-- Code Block >> Start -->
						<pre class="prettyprint js linenums:103">// SlidesJS
$(&#x27;#banner&#x27;).slides({
  preload: true,
  generateNextPrev: true,
  autoHeight: true,
  effect: &quot;slide&quot;,
  play: 5000
});</pre>
						<!-- Code Block >> End -->
					</div>
				</div>
			</section>
			<!-- ========================= SECTION: JAVASCRIPT >> END ========================= -->
			<!-- ========================= SECTION: CONFIGURATIONS >> START ========================= -->
			<section id="configurations">
				<div class="page-header">
					<h1>Configurations <small>Rapido customization</small></h1>
				</div>
				<div class="row">
					<div class="col-md-3">
						<h3>Bootstrap</h3>
						<p>
							Bootstrap css and components
						</p>
					</div>
					<div class="col-md-9">
						For the bootstrap css and components, please check the
						<a href="http://getbootstrap.com" target="_blank">
							Bootstrap 3
						</a>
						documentation
					</div>
				</div>
				<hr/>
				<div class="row">
					<div class="col-md-3">
						<h3>Icons</h3>
					</div>
					<div class="col-md-9">
						<ul>
							<li>
								FontAwesome icons
								<label class="label bg-info">
									4.1
								</label>
								<p>
									Check <strong>
									<a href="http://fortawesome.github.io/Font-Awesome/">
										FontAwesome
									</a></strong> for more details to see how to use and examples
								</p>
							</li>
							<li>
								Glyphicons
								<p>
									Bootstrap default icons
								</p>
							</li>
						</ul>
					</div>
				</div>
				<hr/>
				<div class="row">
					<div class="col-md-3">
						<h3>Animate</h3>
					</div>
					<div class="col-md-9">
						<p>
							<a href="http://daneden.me/animate/"><strong>animate.css</strong></a>
							is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
						</p>
					</div>
				</div>
				<hr/>
				<div class="row">
					<div class="col-md-3">
						<h3>Setup Theme</h3>
						<p>
							10 different color schemes are available on Rapido. If you would like to set your favorite color, you will just need to add it into the head tag.
						</p>
					</div>
					<div class="col-md-9">
						<!-- Code Block >> Start -->
						<pre class="prettyprint lang-html">&lt;head&gt;
           ...
            &lt;link rel="stylesheet" href="assets/css/themes/theme_style2.css" id="skin_color"&gt;
    ...
						</pre>
						<div class="alert alert-info">
							The available color schemes are:
							<ul>
								<li>
									theme_default.css
								</li>
								<li>
									theme_style2.css
								</li>
								<li>
									theme_style3.css
								</li>
								<li>
									theme_style4.css
								</li>
								<li>
									theme_style5.css
								</li>
								<li>
									theme_style6.css
								</li>
								<li>
									theme_style7.css
								</li>
								<li>
									theme_style8.css
								</li>
								<li>
									theme_style9.css
								</li>
								<li>
									theme_style10.css
								</li>
							</ul>
						</div>
					</div>
				</div>
				<hr/>
				<div class="row">
					<div class="col-md-3">
						<h3>Wide or Boxed Layout</h3>
						<p>
							The default Rapido layout is very smooth and fits the page like a glove. If you would like to use a boxed layout, you will just need to add the class “layout-boxed” to the body tag.
						</p>
					</div>
					<div class="col-md-9">
						<!-- Code Block >> Start -->
						<pre class="prettyprint lang-html">&lt;head&gt;
&lt;!-- start: BODY --&gt;
&lt;body class="layout-boxed"&gt;
...
						</pre>
						<div class="alert alert-info">
							Using a box layout will allow you to choose among 5 different page backgrounds.
							To pair a background to a page, you will just need to add the class bg_style_X to the body tag. X stands for the number (1 to 5) of the background theme you have chosen.
						</div>
						<pre class="prettyprint lang-html">&lt;head&gt;
&lt;!-- start: BODY --&gt;
&lt;body class="layout-boxed bg_style_1"&gt;
...
						</pre>
					</div>
				</div>
				<hr/>
				<div class="row">
					<div class="col-md-3">
						<h3>Fixed or Default Header and Footer</h3>
						<p>
							A fixed header and a sliding footer belong to the Rapido default settings. Yet, if you would like to change these settings, please, proceed as follows:
						</p>
					</div>
					<div class="col-md-9">
						<div class="alert alert-info">
							from fixed to default Header: add the class <code>header-default</code> to the body tag
						</div>
						<!-- Code Block >> Start -->
						<pre class="prettyprint lang-html">&lt;head&gt;
&lt;!-- start: BODY --&gt;
&lt;body class="header-default"&gt;
...
						</pre>
						<div class="alert alert-info">
							from default to fixed Footer: add the class <code>footer-fixed</code> to the body tag
						</div>
						<pre class="prettyprint lang-html">&lt;head&gt;
&lt;!-- start: BODY --&gt;
&lt;body class="footer-fixed"&gt;
...
						</pre>
						<div class="alert alert-info">
							You can also combine two or more classes
						</div>
						<pre class="prettyprint lang-html">&lt;head&gt;
&lt;!-- start: BODY --&gt;
&lt;body class="header-default footer-fixed layout-boxed bg_style_1"&gt;
...
						</pre>
					</div>
				</div>
				<hr/>
				<div class="row">
					<div class="col-md-3">
						<h3>Fixed or Default Left Sidebar</h3>
						<p>
							A fixed Sidebar belong to the Rapido default settings. Yet, if you would like to change these settings, please, proceed as follows:
						</p>
					</div>
					<div class="col-md-9">
						<div class="alert alert-info">
							from fixed to default Sidebar: add the class <code>slide-default</code> to the nav with "pageslide-left" id
						</div>
						<!-- Code Block >> Start -->
						<pre class="prettyprint lang-html">&lt;head&gt;
&lt;!-- start: PAGESLIDE LEFT --&gt;
...
&lt;nav class="pageslide inner slide-default" id="pageslide-left" style=""&gt;
...
						</pre>
					</div>
				</div>
				<hr/>
				<div class="row">
					<div class="col-md-3">
						<h3>CSS Utilities</h3>
					</div>
					<div class="col-md-9">
						<table class="table table-border bg-white b-a">
							<thead>
								<tr>
									<td colspan="2">Margin</td>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>.no-margin </td><td>margin: 0 !important;</td>
								</tr>
								<tr>
									<td>.margin-bottom-5</td><td>margin: 0 0 5px 0 !important;</td>
								</tr>
								<tr>
									<td>.margin-bottom-10</td><td>margin: 0 0 10px 0 !important;</td>
								</tr>
								<tr>
									<td>.margin-bottom-30</td><td>margin: 0 0 30px 0 !important;</td>
								</tr>
								<tr>
									<td>.margin-right-5</td><td>margin: 0 5px 0 0 !important;</td>
								</tr>
								<tr>
									<td>.margin-right-10</td><td>margin: 0 10px 0 0 !important;</td>
								</tr>
								<tr>
									<td>.margin-right-15</td><td>margin: 0 15px 0 0 !important;</td>
								</tr>
								<tr>
									<td>margin-right-30</td><td>margin: 0 30px 0 0 !important;</td>
								</tr>
								<tr>
									<td>.space5</td><td>margin-bottom: 5px !important; clear: both;</td>
								</tr>
								<tr>
									<td>.space7</td><td>margin-bottom: 7px !important; clear: both;</td>
								</tr>
								<tr>
									<td>.space10</td><td>margin-bottom: 10px !important; clear: both;</td>
								</tr>
								<tr>
									<td>.space12</td><td>margin-bottom: 12px !important; clear: both;</td>
								</tr>
								<tr>
									<td>.space15</td><td>margin-bottom: 15px !important; clear: both;</td>
								</tr>
								<tr>
									<td>.space20</td><td>margin-bottom: 20px !important; clear: both;</td>
								</tr>
							</tbody>
						</table>
						<table class="table table-border bg-white b-a">
							<thead>
								<tr>
									<td colspan="2">Border</td>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>.no-border</td><td>border: none !important;</td>
								</tr>
								<tr>
									<td>.border-right</td><td>border-right-style: solid;
									border-right-width: 1px;
									border-color: inherit;</td>
								</tr>
								<tr>
									<td>.border-left</td><td>border-left-style: solid;
									border-left-width: 1px;
									border-color: inherit;</td>
								</tr>
								<tr>
									<td>.border-top</td><td>border-top-style: solid;
									border-top-width: 1px;
									border-color: inherit;</td>
								</tr>
								<tr>
									<td>.border-bottom</td><td>border-bottom-style: solid;
									border-bottom-width: 1px;
									border-color: inherit;</td>
								</tr>
								<tr>
									<td>.border-light</td><td> border-color: rgba(255, 255, 255, 0.2) !important; (border with light color)</td>
								</tr>
								<tr>
									<td>.border-dark</td><td>border-color: rgba(0, 0, 0, 0.2); (border with dark color)</td>
								</tr>
							</tbody>
						</table>
						<table class="table table-border bg-white b-a">
							<thead>
								<tr>
									<td colspan="2">Radius</td>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>.no-radius</td><td>-moz-border-radius: 0 !important;
									-webkit-border-radius: 0 !important;
									border-radius: 0 !important;</td>
								</tr>
								<tr>
									<td>.radius-3</td><td>border-radius: 3px;</td>
								</tr>
								<tr>
									<td>.radius-5</td><td>border-radius: 5px;</td>
								</tr>
								<tr>
									<td>.radius-10</td><td>border-radius: 10px;</td>
								</tr>
							</tbody>
						</table>
						<table class="table table-border bg-white b-a">
							<thead>
								<tr>
									<td colspan="2">Padding</td>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>.no-padding</td><td>padding: 0 !important;</td>
								</tr>
								<tr>
									<td>.padding-5</td><td>padding: 5px !important;</td>
								</tr>
								<tr>
									<td>.padding-10</td><td>padding: 10px !important;</td>
								</tr>
								<tr>
									<td>.padding-15</td><td>padding: 15px !important;</td>
								</tr>
								<tr>
									<td>.padding-20</td><td>padding: 20px !important;</td>
								</tr>
								<tr>
									<td>.padding-horizontal-5</td><td>padding: 0 5px !important;</td>
								</tr>
								<tr>
									<td>.padding-horizontal-10</td><td>padding: 0 10px !important;</td>
								</tr>
								<tr>
									<td>.padding-horizontal-15</td><td>padding: 0 15px !important;</td>
								</tr>
								<tr>
									<td>.padding-horizontal-20</td><td>padding: 0 20px !important;</td>
								</tr>
								<tr>
									<td>.padding-vertical-10</td><td>padding: 10px 0 !important;</td>
								</tr>
								<tr>
									<td>.padding-vertical-15</td><td>padding: 15px 0 !important;</td>
								</tr>
								<tr>
									<td>.padding-vertical-20</td><td>padding: 20px 0 !important;</td>
								</tr>
								<tr>
									<td>.padding-bottom-5</td><td>padding: 0 0 5px 0 !important;</td>
								</tr>
								<tr>
									<td>.padding-bottom-10</td><td>padding: 0 0 10px 0 !important;</td>
								</tr>
								<tr>
									<td>.padding-bottom-15</td><td>padding: 0 0 15px 0 !important;</td>
								</tr>
							</tbody>
						</table>
						<table class="table table-border bg-white b-a">
							<thead>
								<tr>
									<td colspan="2">Text</td>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>.text-bold</td><td>font-weight: bold;</td>
								</tr>
								<tr>
									<td>.text-extra-small</td><td>font-size: 11px !important;</td>
								</tr>
								<tr>
									<td>.text-small</td><td>font-size: 12px !important;</td>
								</tr>
								<tr>
									<td>.text-extra-small</td><td>font-size: 11px !important;</td>
								</tr>
								<tr>
									<td>.text-large </td><td>font-size: 16px !important;</td>
								</tr>
								<tr>
									<td>.text-extra-large</td><td>font-size: 18px !important;</td>
								</tr>
								<tr>
									<td>.text-orange</td><td>color: #f58a5c;</td>
								</tr>
								<tr>
									<td>.text-green</td><td>color: #1fbba6;</td>
								</tr>
								<tr>
									<td>.text-blue</td><td>color: #5f8295;</td>
								</tr>
								<tr>
									<td>.text-pink</td><td>color: #dd5a82;</td>
								</tr>
								<tr>
									<td>.text-purple</td><td>color: #dd5a82;</td>
								</tr>
								<tr>
									<td>.text-bricky</td><td>color: #894550;</td>
								</tr>
								<tr>
									<td>.text-yellow</td><td>color: #ffb848;</td>
								</tr>
								<tr>
									<td>.text-red</td><td>color: #e66b6b;</td>
								</tr>
								<tr>
									<td>.text-white</td><td>color: white;</td>
								</tr>
								<tr>
									<td>.text-dark</td><td>color: rgba(44, 47, 59, 0.4);</td>
								</tr>
								<tr>
									<td>.text-light</td><td>color: rgba(255, 255, 255, 0.6);</td>
								</tr>
								<tr>
									<td>.text-left</td><td>text-align: left;</td>
								</tr>
								<tr>
									<td>.text-right</td><td>text-align: right;</td>
								</tr>
								<tr>
									<td>.text-light</td><td>color: rgba(255, 255, 255, 0.6);</td>
								</tr>
								<tr>
									<td>.text-left</td><td>text-align: left;</td>
								</tr>
							</tbody>
						</table>
						<table class="table table-border bg-white b-a">
							<thead>
								<tr>
									<td colspan="2">Width and Height</td>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>.width-200</td><td>width: 200px !important;</td>
								</tr>
								<tr>
									<td>.height-155</td><td>height: 155px !important;</td>
								</tr>
								<tr>
									<td>.height-180</td><td>height: 180px !important;</td>
								</tr>
								<tr>
									<td>.height-200</td><td>height: 200px !important;</td>
								</tr>
								<tr>
									<td>.height-230</td><td>height: 230px !important;</td>
								</tr>
								<tr>
									<td>.height-250</td><td>height: 250px !important;</td>
								</tr>
								<tr>
									<td>.height-300</td><td>height: 300px !important;</td>
								</tr>
								<tr>
									<td>.height-350</td><td>height: 350px !important;</td>
								</tr>
							</tbody>
						</table>
						<table class="table table-border bg-white b-a">
							<thead>
								<tr>
									<td colspan="2">Generic Classes</td>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>.inline</td><td>display: inline;</td>
								</tr>
								<tr>
									<td>.block</td><td>display: block;</td>
								</tr>
								<tr>
									<td>.inline-block</td><td>display: inline-block;</td>
								</tr>
								<tr>
									<td>.no-display</td><td>display: none;</td>
								</tr>
								<tr>
									<td>.vertical-align-bottom</td><td>vertical-align: bottom;</td>
								</tr>
								<tr>
									<td>.float-none</td><td>float: none;</td>
								</tr>
								<tr>
									<td>.background-dark</td><td>background: rgba(0, 0, 0, 0.2);</td>
								</tr>
								<tr>
									<td>.background-light</td><td>background: rgba(255, 255, 255, 0.6) !important;</td>
								</tr>
								<tr>
									<td>.noTransform</td><td>-o-transform: none !important;
									-moz-transform: none !important;
									-ms-transform: none !important;
									-webkit-transform: none !important;
									transform: none !important;</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</section>
			<!-- ========================= SECTION: CONFIGURATIONS >> END ========================= -->
			<!-- ========================= SECTION: PLUGINS >> START ========================= -->
			<section id="plugins">
				<div class="page-header">
					<h1>Top Epresso Plugins You Should Know About </h1>
				</div>
				<div class="row">
					<div class="col-md-3">
						<h3>Subview.js</h3>
						<p>
							A true alternative solution to the modal is the Subview.
							Through the Subview.js (a jQuery plugn created by Cliptheme specifically for Rapido) you can easily and quickly display any content, thus considerably improving the user’s experience.
						</p>
						<p>
							<a href="http://www.cliptheme.com/demo/rapido/ui_subview.html">
								Demo here
							</a>
						</p>
					</div>
					<div class="col-md-9">
						<p>
							If you decide to show it in the right corner, remember to insert the class <code>show-sv</code> and the attribute <code>data-startFrom="right" </code> on the button.
						</p>
						<div class="highlight">
							<pre><code class="html">&lt;a class="btn btn-green show-sv" href="#example-subview-1" data-startFrom="right"&gt;Show Right Subview &lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;&lt;/a&gt;</code></pre>
						</div>
						<p>
							Otherwise, if you do not insert any attribute data, the sub-view will automatically appear in the top corner of the screen.
						</p>
						<div class="highlight">
							<pre><code class="html">&lt;a class="btn btn-green show-sv" href="#example-subview-1"&gt;Show Top Subview &lt;i class="fa fa-chevron-up"&gt;&lt;/i&gt;&lt;/a&gt;
</code></pre>
						</div>
						<div class="alert alert-success">
							The sub-view will automatically display the close button in the top right end corner of the screen. You can also create your customized close buttons with the class <code>hide-sv</code>
						</div>
						<p>
							If you recall a sub-view link in an already open sub-view, the content will be shown with a fade-out effect. Then, a back button will appear, allowing you to scroll back the contents.
						</p>
						<div class="alert alert-success">
							You can also create your customized back buttons with the class <code>back-sv</code>
						</div>
						<p>
							You can use the call-back functions when the sub-view is shown, when you click the close button or when you hide the sub-view content.
						</p>
						<div class="highlight">
							<pre><code class="havascript">$(".sv-callback1").on("click", function() {
	$.subview({
		content: "#example-subview-1",
		onShow: function() {
			bootbox.alert("Do something when the subview is shown!");
		}
	});
})</code></pre>
						</div>
						<div class="alert alert-success">
							when the sbview appear, an alert displays the message "Do something when the subview is shown!"
						</div>
						<p>
							If you choose to associate a function to the close button, you can also program the automatic dismissal of the sub-view, by inserting the hidesubview function <code>$.hideSubview();</code> in the desired point.
						</p>
						<div class="highlight">
							<pre><code class="javascript">$(".sv-callback2").on("click", function() {					
	$.subview({
		content: "#example-subview-1",
		startFrom: "right",
		onClose: function() {
			bootbox.confirm("Are you sure you want to close subview?", function(result) {
				if(result) {
					$.hideSubview();
				};
			});						
		}
	});
});</code></pre>
						</div>
						<div class="alert alert-success">
							before closing an alert message will ask for confirmation
						</div>
						<div class="highlight">
							<pre><code class="javascript">$(".sv-callback3").on("click", function() {
	$.subview({
		content: "#example-subview-1",
		startFrom: "right",
		onHide: function() {
			bootbox.alert("Do something when the subview is hidden!");
		}
	});
});</code></pre>
						</div>
						<div class="alert alert-success">
							when the sbview disappear, an alert displays the message "Do something when the subview is hidden!"
						</div>
					</div>
				</div>
				<hr/>
				<div class="row">
					<div class="col-md-3">
						<h3>iCheck</h3>
						<p>
							Rapido use iCheck plugin by Damir Sultanov to customize checkboxes and radio buttons.
						</p>
						<p>
							<a href="http://fronteed.com/iCheck/">
								Plugin site here
							</a>
						</p>
					</div>
					<div class="col-md-9">
						<p>
							HTML5 allows specifying indeterminate ("partially" checked) state for checkboxes. iCheck supports it for both checkboxes and radio buttons.
							You can make an input indeterminate through HTML using additional attributes (supported by iCheck). Both do the same job, but indeterminate="true" may not work in some browsers (like IE7):
						</p>
						<!-- Code Block >> Start -->
						<pre class="prettyprint lang-html">&lt;head&gt;
&lt;!-- indeterminate="true" --&gt;
&lt;input type="checkbox" indeterminate="true"&gt;
&lt;input type="radio" indeterminate="true"&gt;
 
&lt;!-- determinate="false" --&gt;
&lt;input type="checkbox" determinate="false"&gt;
&lt;input type="radio" determinate="false"&gt;
						</pre>
						<p>
							indeterminate and determinate methods can be used to toggle indeterminate state.
						</p>
						<h4>Callbacks</h4>
						<p class="callbacks-info">
							iCheck provides plenty callbacks, which may be used to handle changes.
						</p>
						<table>
							<thead>
								<tr>
									<th> Callback name</th>
									<td> When used</td>
								</tr>
							</thead>
							<tbody>
								<tr>
									<th> ifClicked</th>
									<td> user clicked on a customized input or an assigned label</td>
								</tr>
								<tr>
									<th> ifChanged</th>
									<td> input's <span class="mark">checked</span>, <span class="mark">disabled</span> or <span class="mark">indeterminate</span> state is changed</td>
								</tr>
								<tr>
									<th> ifChecked</th>
									<td> input's state is changed to <span class="mark">checked</span></td>
								</tr>
								<tr>
									<th> ifUnchecked</th>
									<td><span class="mark">checked</span> state is removed</td>
								</tr>
								<tr>
									<th> ifToggled</th>
									<td> input's <span class="mark">checked</span> state is changed</td>
								</tr>
								<tr>
									<th> ifDisabled</th>
									<td> input's state is changed to <span class="mark">disabled</span></td>
								</tr>
								<tr>
									<th> ifEnabled</th>
									<td><span class="mark">disabled</span> state is removed</td>
								</tr>
								<tr>
									<th> ifIndeterminate</th>
									<td> input's state is changed to <span class="mark">indeterminate</span></td>
								</tr>
								<tr>
									<th> ifDeterminate</th>
									<td><span class="mark">indeterminate</span> state is removed</td>
								</tr>
								<tr>
									<th> ifCreated</th>
									<td> input is just customized</td>
								</tr>
								<tr>
									<th> ifDestroyed</th>
									<td> customization is just removed</td>
								</tr>
							</tbody>
						</table>
						<p>
							Use on() method to bind them to inputs:
						</p>
						<pre class="prettyprint lang-markup">
    $('input').on('ifChecked', function(event){
    alert(event.type + ' callback');
    });</pre>
						<p>
							ifCreated callback should be binded before plugin init.
						</p>
						<h4>Methods</h4>
						<p>
							These methods can be used to make changes programmatically (any selectors can be used):
						</p>
						<p>
							<span class="mark">$(&#39;input&#39;).iCheck(&#39;check&#39;);</span> &mdash; change input&#39;s state to <span class="mark">checked</span>
						</p>
						<p>
							<span class="mark">$(&#39;input&#39;).iCheck(&#39;uncheck&#39;);</span> &mdash; remove <span class="mark">checked</span> state
						</p>
						<p>
							<span class="mark">$(&#39;input&#39;).iCheck(&#39;toggle&#39;);</span> &mdash; toggle <span class="mark">checked</span> state
						</p>
						<p>
							<span class="mark">$(&#39;input&#39;).iCheck(&#39;disable&#39;);</span> &mdash; change input&#39;s state to <span class="mark">disabled</span>
						</p>
						<p>
							<span class="mark">$(&#39;input&#39;).iCheck(&#39;enable&#39;);</span> &mdash; remove <span class="mark">disabled</span> state
						</p>
						<p>
							<span class="mark">$(&#39;input&#39;).iCheck(&#39;indeterminate&#39;);</span> &mdash; change input&#39;s state to <span class="mark">indeterminate</span>
						</p>
						<p>
							<span class="mark">$(&#39;input&#39;).iCheck(&#39;determinate&#39;);</span> &mdash; remove <span class="mark">indeterminate</span> state
						</p>
						<p>
							<span class="mark">$(&#39;input&#39;).iCheck(&#39;update&#39;);</span> &mdash; apply input changes, which were done outside the plugin
						</p>
						<p>
							<span class="mark">$(&#39;input&#39;).iCheck(&#39;destroy&#39;);</span> &mdash; remove all traces of iCheck
						</p>
						<p class="methods-callback">
							You may also specify some function, that will be executed on each method call:
						</p>
						<pre class="prettyprint lang-markup">
$(&#39;input&#39;).iCheck(&#39;check&#39;, function(){
  alert(&#39;Well done, Sir&#39;);
});
</pre>
					</div>
				</div>
				<hr/>
				<div class="row">
					<div class="col-md-12">
						<h3>Complete list of plugins</h3>
						<p>
							Here is the list of the plug-ins used for Rapido
						</p>
					</div>
					<div class="col-md-12">
						<table class="table table-striped">
							<thead>
								<tr>
									<th> Name</th>
									<th> Description</th>
									<th> URL</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td> jQuery </td>
									<td> Core Javascript library</td>
									<td>
									<a target="_blank" href="http://www.jquery.com">
										http://www.jquery.com
									</a></td>
								</tr>
								<tr>
									<td> Twitter Bootstrap v3.x</td>
									<td> Sleek, intuitive, and powerful front-end framework for faster and easier web development</td>
									<td>
									<a target="_blank" href="http://getbootstrap.com">
										http://getbootstrap.com
									</a></td>
								</tr>
								<tr>
									<td> Font Awesome</td>
									<td> Font Awesome gives you scalable vector icons that can instantly be customized &mdash; size, color, drop shadow, and anything that can be done with the power of CSS.</td>
									<td>
									<a target="_blank" href="http://fortawesome.github.io/Font-Awesome/">
										http://fortawesome.github.io/Font-Awesome
									</a></td>
								</tr>
								<tr>
									<td> jQuery BlockUI</td>
									<td> The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.</td>
									<td>
									<a target="_blank" href="http://www.malsup.com/jquery/block/">
										http://www.malsup.com/jquery/block
									</a></td>
								</tr>
								<tr>
									<td> VelocitJS</td>
									<td> Accelerated JavaScript animation.</td>
									<td>
									<a target="_blank" href="http://velocityjs.org">
										http://VelocityJS.org
									</a></td>
								</tr>
								<tr>
									<td> OWL Carousel </td>
									<td> Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.</td>
									<td>
									<a target="_blank" href="http://owlgraphic.com/owlcarousel/">
										http://owlgraphic.com/owlcarousel/
									</a></td>
								</tr>
								<tr>
									<td> iCheck</td>
									<td> super customized checkboxes and radio buttons for jQuery &amp; Zepto</td>
									<td>
									<a target="_blank" href="http://damirfoy.com/iCheck/">
										http://damirfoy.com/iCheck
									</a></td>
								</tr>
								<tr>
									<td> perfect-scrollbar</td>
									<td> perfect-scrollbar is very tiny but perfect jQuery scrollbar plugin.</td>
									<td>
									<a target="_blank" href="http://www.yuiazu.net/perfect-scrollbar/">
										http://www.yuiazu.net/perfect-scrollbar
									</a></td>
								</tr>
								<tr>
									<td> Input Limiter</td>
									<td> This jQuery plugin will allow you to limit input into form fields. It can display a message as the user types to let them know how many characters they have remaining.</td>
									<td>
									<a target="_blank" href="http://rustyjeans.com/jquery-plugins/input-limiter">
										http://rustyjeans.com/jquery-plugins/input-limiter
									</a></td>
								</tr>
								<tr>
									<td> jQuery Autosize</td>
									<td> A plugin to automatically adjust textarea height.</td>
									<td>
									<a target="_blank" href="http://www.jacklmoore.com/autosize/">
										http://www.jacklmoore.com/autosize
									</a></td>
								</tr>
								<tr>
									<td> Select2</td>
									<td> Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results</td>
									<td>
									<a target="_blank" href="http://ivaynberg.github.io/select2">
										http://ivaynberg.github.io/select2
									</a></td>
								</tr>
								<tr>
									<td> Masked Input Plugin</td>
									<td> It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc).</td>
									<td>
									<a target="_blank" href="http://digitalbush.com/projects/masked-input-plugin/">
										http://digitalbush.com/projects/masked-input-plugin
									</a></td>
								</tr>
								<tr>
									<td> Datepicker for Bootstrap</td>
									<td> Add datepicker picker to field or to any other element.</td>
									<td>
									<a target="_blank" href="http://www.eyecon.ro/bootstrap-datepicker">
										http://www.eyecon.ro/bootstrap-datepicker
									</a></td>
								</tr>
								<tr>
									<td> Bootstrap Timepicker</td>
									<td> Easily select a time for a text input using your mouse or keyboards arrow keys.</td>
									<td>
									<a target="_blank" href="http://jdewit.github.io/bootstrap-timepicker">
										http://jdewit.github.io/bootstrap-timepicker
									</a></td>
								</tr>
								<tr>
									<td> Date Range Picker for Bootstrap</td>
									<td> This date range picker component for Bootstrap creates a dropdown menu from which a user can select a range of dates. I created it while building the UI for Improvely, which needed a way to select date ranges for reports.</td>
									<td>
									<a target="_blank" href="http://www.dangrossman.info/2012/08/20/a-date-range-picker-for-twitter-bootstrap">
										http://www.dangrossman.info/2012/08/20/a-date-range-picker-for-twitter-bootstrap
									</a></td>
								</tr>
								<tr>
									<td> Colorpicker for Bootstrap</td>
									<td> Add color picker to field or to any other element.</td>
									<td>
									<a target="_blank" href="http://www.eyecon.ro/bootstrap-colorpicker">
										http://www.eyecon.ro/bootstrap-colorpicker
									</a></td>
								</tr>
								<tr>
									<td> jQuery Tags Input</td>
									<td> Do you use tags to organize content on your site? This plugin will turn your boring tag list into a magical input that turns each tag into a style-able object with its own delete link. The plugin handles all the data - your form just sees a comma-delimited list of tags!</td>
									<td>
									<a target="_blank" href="http://xoxco.com/projects/code/tagsinput">
										http://xoxco.com/projects/code/tagsinput
									</a></td>
								</tr>
								<tr>
									<td> Bootstrap File upload</td>
									<td> The file upload plugin allows you to create a visually appealing file or image upload widgets.</td>
									<td>
									<a target="_blank" href="http://jasny.github.io/bootstrap/javascript.html#fileupload">
										http://jasny.github.io/bootstrap/javascript.html#fileupload
									</a></td>
								</tr>
								<tr>
									<td> Summernote</td>
									<td> Super Simple WYSIWYG Editor on Bootstrap</td>
									<td>
									<a target="_blank" href="http://hackerwins.github.io/summernote">
										http://hackerwins.github.io/summernote
									</a></td>
								</tr>
								<tr>
									<td> CKEditor</td>
									<td> CKEditor is a ready-for-use HTML text editor designed to simplify web content creation. It's a WYSIWYG editor that brings common word processor features directly to your web pages. Enhance your website experience with our community maintained editor.</td>
									<td>
									<a target="_blank" href="http://ckeditor.com/">
										http://ckeditor.com
									</a></td>
								</tr>
								<tr>
									<td> Bootstrap Paginator</td>
									<td> Bootstrap Paginator is a jQuery plugin that simplifies the rendering of Bootstrap Pagination component. It provides methods to automates the update of the pagination status and also some events to notify the status changes within the component.</td>
									<td>
									<a target="_blank" href="http://bootstrappaginator.org/">
										http://bootstrappaginator.org/
									</a></td>
								</tr>
								<tr>
									<td> jQuery.pulsate</td>
									<td> jQuery.pulsate.js adds a pulsating effect to elements. Useful for drawing the users attention.</td>
									<td>
									<a target="_blank" href="http://kilianvalkhof.com/jquerypulsate">
										http://kilianvalkhof.com/jquerypulsate
									</a></td>
								</tr>
								<tr>
									<td> Gritter for jQuery</td>
									<td> It’s basically a notification bubble/popup that appears in the top right of your desktop</td>
									<td>
									<a target="_blank" href="http://boedesign.com/blog/2009/07/11/growl-for-jquery-gritter">
										http://boedesign.com/blog/2009/07/11/growl-for-jquery-gritter
									</a></td>
								</tr>
								<tr>
									<td> Ladda UI for Bootstrap</td>
									<td> Buttons with built-in loading indicators, effectively bridging the gap between action and feedback.</td>
									<td>
									<a target="_blank" href="http://msurguy.github.io/ladda-bootstrap">
										http://msurguy.github.io/ladda-bootstrap
									</a></td>
								</tr>
								<tr>
									<td> Bootstrap switch</td>
									<td> You can now also use radio buttons and checkboxes as switches.</td>
									<td>
									<a target="_blank" href="http://www.bootstrap-switch.org">
										http://www.bootstrap-switch.org
									</a></td>
								</tr>
								<tr>
									<td> Social Network Buttons</td>
									<td> Gorgeous, vector, zoomable, Retina-ready, and customisable social media buttons using Bootstrap and Font Awesome.</td>
									<td>
									<a target="_blank" href="http://noizwaves.github.io/bootstrap-social-buttons">
										http://noizwaves.github.io/bootstrap-social-buttons
									</a></td>
								</tr>
								<tr>
									<td> Bootstrap-Modal</td>
									<td> Extends Bootstrap's native modals to provide additional functionality. Introduces a ModalManager class that operates behind the scenes to handle multiple modals by listening on their events.</td>
									<td>
									<a target="_blank" href="https://github.com/jschr/bootstrap-modal">
										https://github.com/jschr/bootstrap-modal
									</a></td>
								</tr>
								<tr>
									<td> jQRangeSlider</td>
									<td> jQRangeSlider is highly dependant on CSS. Be sure to include one of the provided stylesheets.</td>
									<td>
									<a target="_blank" href="http://ghusse.github.io/jQRangeSlider/documentation.html">
										http://ghusse.github.io/jQRangeSlider/documentation.html
									</a></td>
								</tr>
								<tr>
									<td> jQuery Knob</td>
									<td> Nice, downward compatible, touchable, jQuery dial</td>
									<td>
									<a target="_blank" href="http://anthonyterrien.com/knob">
										http://anthonyterrien.com/knob
									</a></td>
								</tr>
								<tr>
									<td> Nestable jQuery Plugin</td>
									<td> Nestable is an interactive hierarchical list. You can drag and drop to rearrange the order. It even works well on touch-screens.</td>
									<td>
									<a target="_blank" href="http://dbushell.com/2012/06/17/nestable-jquery-plugin">
										http://dbushell.com/2012/06/17/nestable-jquery-plugin
									</a></td>
								</tr>
								<tr>
									<td> jsTree</td>
									<td> jsTree is jquery plugin, that provides interactive trees.</td>
									<td>
									<a target="_blank" href="http://www.jstree.com/">
										http://www.jstree.com/
									</a></td>
								</tr>
								<tr>
									<td> Truncate.js</td>
									<td> Fast, intelligent Javascript text truncation.</td>
									<td>
									<a target="_blank" href="https://github.com/jeffchan/truncate.js/tree/master">
										https://github.com/jeffchan/truncate.js/tree/master
									</a></td>
								</tr>
								<tr>
									<td> DataTables</td>
									<td> DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.</td>
									<td>
									<a target="_blank" href="http://datatables.net">
										http://datatables.net
									</a></td>
								</tr>
								<tr>
									<td> Smart Wizard</td>
									<td> Smart Wizard is a flexible jQuery plug-in for wizard like interface. It allows to group contents into sections and so it saves page space and also gives a neat and stylish interface for users.</td>
									<td>
									<a target="_blank" href="http://techlaboratory.net/smartwizard">
										http://techlaboratory.net/smartwizard
									</a></td>
								</tr>
								<tr>
									<td> jQuery Validation</td>
									<td> This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options.</td>
									<td>
									<a target="_blank" href="http://jqueryvalidation.org">
										http://jqueryvalidation.org
									</a></td>
								</tr>
								<tr>
									<td> Jcrop</td>
									<td> Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.</td>
									<td>
									<a target="_blank" href="http://deepliquid.com/content/Jcrop.html">
										http://deepliquid.com/content/Jcrop.html
									</a></td>
								</tr>
								<tr>
									<td> jQuery File Upload</td>
									<td> File Upload widget with multiple file selection, drag&amp;drop support, progress bars, validation and preview images, audio and video for jQuery.
									<br>
									Supports cross-domain, chunked and resumable file uploads and client-side image resizing.</td>
									<td>
									<a target="_blank" href="http://blueimp.github.io/jQuery-File-Upload">
										http://blueimp.github.io/jQuery-File-Upload
									</a></td>
								</tr>
								<tr>
									<td> DropzoneJS</td>
									<td> DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews.</td>
									<td>
									<a target="_blank" href="http://www.dropzonejs.com">
										http://www.dropzonejs.com
									</a></td>
								</tr>
								<tr>
									<td> FullCalendar</td>
									<td> FullCalendar is a jQuery plugin that provides a full-sized, drag &amp; drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar).</td>
									<td>
									<a target="_blank" href="http://arshaw.com/fullcalendar">
										http://arshaw.com/fullcalendar
									</a></td>
								</tr>
								<tr>
									<td> rainyday.js</td>
									<td> The idea behind rainyday.js is to create a JavaScript library that makes use of the HTML5 canvas to render an animation of raindrops falling on a glass surface.</td>
									<td>
									<a target="_blank" href="http://maroslaw.github.io/rainyday.js">
										http://maroslaw.github.io/rainyday.js
									</a></td>
								</tr>
								<tr>
									<td> gmaps.js</td>
									<td> gmaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code.</td>
									<td>
									<a target="_blank" href="http://hpneo.github.io/gmaps">
										http://hpneo.github.io/gmaps
									</a></td>
								</tr>
								<tr>
									<td> NVD3</td>
									<td> This project is an attempt to build re-usable charts and chart components for d3.js without taking away the power that d3.js gives you</td>
									<td>
									<a target="_blank" href="http://nvd3.org/">
										http://nvd3.org/
									</a></td>
								</tr>
								<tr>
									<td> jQuery Sparklines</td>
									<td> This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.</td>
									<td>
									<a target="_blank" href="http://omnipotent.net/jquery.sparkline">
										omnipotent.net/jquery.sparkline
									</a></td>
								</tr>
								<tr>
									<td> easy pie chart</td>
									<td> Easy pie chart is a jQuery plugin that uses the canvas element to render simple pie charts for single values. These charts are highly customizable, very easy to implement, scale to the resolution of the display of the client to provide sharp charts even on retina displays, and use requestAnimationFrame for smooth animations on modern devices.</td>
									<td>
									<a target="_blank" href="http://rendro.github.io/easy-pie-chart">
										http://rendro.github.io/easy-pie-chart
									</a></td>
								</tr>
								<tr>
									<td> jQuery UI Touch Punch</td>
									<td> Touch Event Support for jQuery UI</td>
									<td>
									<a target="_blank" href="http://touchpunch.furf.com">
										http://touchpunch.furf.com
									</a></td>
								</tr>
								<tr>
									<td> Excanvas</td>
									<td> Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages</td>
									<td>
									<a target="_blank" href="http://excanvas.sourceforge.net">
										http://excanvas.sourceforge.net
									</a></td>
								</tr>
								<tr>
									<td> Respond</td>
									<td> A fast &amp; lightweight polyfill for min/max-width and CSS3 Media Queries (for IE 6-8, and more)</td>
									<td>
									<a target="_blank" href="https://github.com/scottjehl/Respond">
										https://github.com/scottjehl/Respond
									</a></td>
								</tr>
								<tr>
									<td> jQuery Mockjax</td>
									<td> jQuery Mockjax provides request/response mocking for ajax requests with jQuery and provides all standard behaviors in the request/response flow.</td>
									<td>
									<a target="_blank" href="https://github.com/appendto/jquery-mockjax">
										https://github.com/appendto/jquery-mockjax
									</a></td>
								</tr>
								<tr>
									<td> Moment.js</td>
									<td> Parse, validate, manipulate, and display dates in javascript.</td>
									<td>
									<a target="_blank" href="http://momentjs.com/">
										http://momentjs.com/
									</a></td>
								</tr>
								<tr>
									<td> HTML Table Export jquery Plugin</td>
									<td> HTML Table Export jQuery Plugin helps user export HTML Table to JSON, XML, PNG, CSV, TXT, SQL, MS-Word, Ms-Excel, Ms-Powerpoint and PDF.</td>
									<td>
									<a target="_blank" href="http://ngiriraj.com/pages/htmltable_export/demo.php">
										http://ngiriraj.com/pages/htmltable_export/demo.php
									</a></td>
								</tr>
								<tr>
									<td> TouchSwipe</td>
									<td> A jquery plugin to be used on touch devices such as iPad, iPhone, android etc

Detects single and multiple finger swipes, pinches and falls back to mouse 'drags' on the desktop. </td>
									<td>
									<a target="_blank" href="http://labs.rampinteractive.co.uk/touchSwipe/demos/">
										http://labs.rampinteractive.co.uk/touchSwipe/demos/
									</a></td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</section>
			<!-- ========================= SECTION: PLUGINS >> END ========================= -->
			<!-- ========================= SECTION: CHANGE LOG >> START ========================= -->
			<section id="changelog">
				<div class="page-header">
					<h1>Change Log</h1>
				</div>
				<div class="row">
					<div class="col-md-12">
						<h4>Version 1.1 &ndash; 9 August 2014</h4>
						<ul>
							<li>
                                NEW: Detects finger swipes on touch devices to close left and right Sidebar
                                <ul>
                                    <li>Added plugin folder: <code>assets/plugins/TouchSwipe/</code></li>
                                    <li>Modified js file: <code>assets/js/main.js</code></li>
                                </ul>
                            </li>
                            <li>
                                FIX: Css bug in chrome on the login page
                                <ul>
                                	<li>Modified html file: <code>login_login.html</code></li>
                                    <li>Modified css file: <code>assets/css/style.css</code></li>
                                    <li>Modified SASS file: <code>ssets/sass/partials/_login.scss</code></li>
                                </ul>
                            </li>
						</ul>
					</div>
				</div>
			</section>
			<!-- ========================= SECTION: CHANGE LOG >> END ========================= -->
			<hr />
			<div class="goodbye">
				<p>
					Once again, thank you so much for purchasing Rapido. We hope you will enjoy using it for your next project.
				</p>
			</div>
			<hr />
			<footer>
				<p>
					&copy; Cliptheme 2014
				</p>
			</footer>
		</div>
		<!-- ========================= MAIN CONTAINER >> END ========================= -->
		<!-- loading javascripts -->
		<script src="assets/js/jquery.js"></script>
		<script src="assets/js/bootstrap.min.js"></script>
		<script src="assets/js/google-code-prettify/prettify.js"></script>
		<!-- init javascripts -->
	</body>
</html>
